import 'package:flutter/material.dart';

class PledgePage extends StatefulWidget {
  @override
  _PledgePageState createState() => _PledgePageState();
}

class _PledgePageState extends State<PledgePage> {
  final items = List<String>.generate(10, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Padding(
            padding: EdgeInsets.only(top: 20, left: 18, right: 18),
            child: Column(children: [
              Card(
                  elevation: 5.0, //设置阴影
                  shadowColor: Color(0xB3FFFFFF),
                  child: Padding(
                    padding: EdgeInsets.all(20),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("质押币种",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.w600)),
                            Row(
                              children: [
                                Image.asset(
                                  "assets/images/ic_btc.png",
                                  width: 30,
                                  height: 30,
                                ),
                                SizedBox(width: 8),
                                Text("BTC",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ))
                              ],
                            )
                          ],
                        ),
                        Container(
                            alignment: Alignment.center,
                            margin: EdgeInsets.only(top: 20, bottom: 15),
                            child: RichText(
                              text: TextSpan(children: [
                                TextSpan(
                                  text: "当前支持的质押币种有：",
                                  style: TextStyle(
                                      color: Color(0xFFD4D4D4), fontSize: 13),
                                ),
                                TextSpan(
                                    text:
                                        "BTC / BCH / ETH / LTC / USDT / USDC / LTC / USDT / USDC / LTC / USDT / USDC",
                                    style: TextStyle(
                                      color: Color(0xFF9E9E9E),
                                      fontSize: 13,
                                    )),
                              ]),
                            )),
                        Divider(),
                        SizedBox(height: 10),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("借款币种",
                                style: TextStyle(
                                    fontSize: 17, fontWeight: FontWeight.w600)),
                            Row(
                              children: [
                                Image.asset(
                                  "assets/images/ic_btc.png",
                                  width: 30,
                                  height: 30,
                                ),
                                SizedBox(width: 8),
                                Text("BTC",
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w500,
                                    ))
                              ],
                            )
                          ],
                        ),
                      ],
                    ),
                  )),
              Container(
                  height: 55,
                  alignment: Alignment.center,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text("BTC/USDT"),
                      Text(
                        "\$48,637.88",
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.w500),
                      )
                    ],
                  )),
              Divider(),
              Column(
                  children: items.map<Widget>((index) {
                return itemView(index);
              }).toList()),
              /*Expanded(
                child: Column(
                    children: items.map<Widget>((index) {
                  return itemView(index);
                }).toList()),
                // child: ListView.builder(
                //   itemCount: items.length,
                //   itemBuilder: (context, index) {
                //     return itemView(index);
                //   },
                // ),
              )*/
            ])));
  }

  itemView(index) {
    return Column(children: [
      Container(
        padding: EdgeInsets.symmetric(vertical: 18),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(children: [
              Text("BTC/USDT",
                  style: TextStyle(
                      fontSize: 16,
                      color: Colors.black,
                      fontWeight: FontWeight.w400)),
              SizedBox(width: 10),
              Container(
                decoration: BoxDecoration(
                    color: Color(0xFFFFF1E4),
                    borderRadius:
                        BorderRadius.only(topRight: Radius.circular(8))),
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                  child: Text(
                    "美金计价",
                    style: TextStyle(color: Color(0xFFE88D38), fontSize: 12),
                  ),
                ),
              )
            ]),
            SizedBox(height: 15),
            InkWell(
              onTap: (){Navigator.pushNamed(context, '/loan/detail');},
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Expanded(
                      flex: 3,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Text(
                                  "15.33",
                                  style: TextStyle(
                                      fontSize: 30,
                                      color: Color(0xFF406BF2),
                                      fontWeight: FontWeight.w500),
                                ),
                                Text(
                                  "%",
                                  style: TextStyle(
                                      fontSize: 24,
                                      color: Color(0xFF406BF2),
                                      fontWeight: FontWeight.w500),
                                ),
                              ]),
                          SizedBox(height: 5),
                          Text("年化利率",
                              style: TextStyle(fontSize: 12, color: Colors.grey)),
                        ],
                      )),
                  Expanded(
                      flex: 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("7-30 天",
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w500)),
                          SizedBox(height: 5),
                          Text(
                            "期限",
                            style: TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ],
                      )),
                  Expanded(
                      flex: 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("15.33%",
                              style: TextStyle(
                                  fontSize: 16, fontWeight: FontWeight.w500)),
                          SizedBox(height: 5),
                          Text("质押率",
                              style: TextStyle(fontSize: 12, color: Colors.grey)),
                        ],
                      ))
                ],
              ),
            ),
          ],
        ),
      ),
      Divider(),
    ]);
  }
}
